<template>
  <!-- 页面布局盒子 -->
  <div class="home_box">
    <!-- 文章左侧盒子 -->
    <div class="home_left_boxs">
      <a-card>
        <h2><b style="font-weight: bold;color: pink;">{{ itemtit }}</b> 分类文章</h2>
        <p>共搜到<b style="font-weight: bold;color: pink;">{{ total }}</b> 篇</p>
      </a-card>
      <br/>
      <a-card :loading="false" style="width: 100%">
        <div class="home_category">
          <span style="color: pink;">all</span>
          <span v-for="item in CategoryList" :key="item.id"  @click="()=>handeltocate(item.value)"
            :class="item.value == route.params.id ?'strong':''"
            >{{ item.label }}</span>
        </div>
      </a-card>
      <a-card :loading="false" v-for="item in categoryLists" :key="item.id">
        <component :is="Articleitem" :item="item"></component>
      </a-card>
      <a-card v-if="categoryLists.length<=0">页面暂无数据</a-card>
    </div>

    <div class="home_right_boxs">
      <a-card title="推荐阅读" style="width: 300px">
        <div class="right_overf">
          <div class="recommend_text" v-for="item in recommendList" :key="item.id" @click="() => toarchdetail(item.id)">
            {{ item.title }} · {{ Math.abs(dayjs().diff(dayjs(item.createAt), 'day')) }} 天前
          </div>
        </div>
      </a-card>
      <br />
      <a-card title="文章标签" style="width: 300px">
        <div class="right_tag">
          <button v-for="item in tagList" :key="item.id" @click="()=>handeltags(item.value)">
            {{ item.label }} {{ item.articleCount }}
          </button>
        </div>
      </a-card>
    </div>
  </div>
</template>

<!-- -->
<script setup lang="ts">
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { ref, computed, onMounted, getCurrentInstance, ComponentInternalInstance, watch } from "vue";
//引入日期转换装置
import dayjs from 'dayjs'
//引入pinia
import { storeToRefs } from "pinia";
import { useHomes } from "../store/home";
import Articleitem from "../components/articleitem.vue"
import { useRouter,useRoute } from "vue-router"
import { useCategory } from "../store/Cotegory"
let router = useRouter(),route = useRoute();
let categorys = useCategory()
categorys.getCategory(route.params.id)
let {categoryLists,total} = storeToRefs(categorys)
//跳转详情页
let toarchdetail = (id: any) => {
  // console.log(id)
  router.push("/archives/" + id)
}

watch(()=>route.params.id,(newval)=>{
  // categorys.getCategory(route.params.id)
  location.reload()
})


const homes = useHomes()
let recommendList = ref([] as any);
let { articleList, tagList, swiperList, CategoryList, articleListall } = storeToRefs(homes)

let itemtit = ref("");
watch(CategoryList,(newval)=>{
   let item =  newval.find((v:any)=>v.value==route.params.id)
  itemtit.value = item.label
})

//获取所有文章
const { proxy } = getCurrentInstance() as ComponentInternalInstance
homes.getArtitemall()
homes.getArticle()
//获取所有分类
homes.getcategory()
//获取所有标签
homes.gettags()

watch(articleListall, (newval) => {
  newval.slice(0, 6).forEach((item: any, index: number) => {
    setTimeout(() => {
      recommendList.value.push(item)
      proxy!.$forceUpdate() // 通知 Vue 强制更新视图
    }, index * 800);
  })
})
//跳转分类搜索
let handeltocate = (id:any) =>{
  if(id=="") return
    router.push("/category/"+id)
    // console.log(id)
} 
//跳转标签搜索
let handeltags = (id:any) =>{
    if(id=="")return
    router.push("/tags/"+id)
    // console.log(id)
} 
</script>

<style lang="scss">
.strong{
  color: pink;
}
.home_box {
  height: 100vh;
  margin: 0 auto;
  overflow: auto;
  display: flex;
  justify-content: center;
  background: #f0f2f5;

  .home_left_boxs {
    flex: 1;
    min-width: 500px;
    max-width: 900px;
    margin-right: 15px;
    background: none;

  }

  .home_right_boxs {
    width: 320px;
    height: 100vh;
    background: none;
    position: sticky;
    top: 0;
    right: 0;

    .right_overf {
      width: 100%;
      overflow: hidden;
    }

    .recommend_text {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 6px 0;
      animation: textrightx 0.8s;
      cursor: pointer;

      &:hover {
        color: pink;
      }
    }
  }

  &::-webkit-scrollbar {
    display: none;
  }
}

.home_category {
  display: flex;
  flex-wrap: wrap;

  span {
    margin: 5px;
    cursor: pointer;
  }

  span:hover {
    color: pink;
  }
}

//隐藏滚动条
html::-webkit-scrollbar {
  display: none;
}

.right_tag {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  button {
    padding: 3px 5px;
    margin: 5px;
    background: none;
    border: none;
    border: 1px solid #ccc;
    outline: none;
    cursor: pointer;

    &:hover {
      border: 1px solid #a61851;
    }
  }
}

@keyframes textrightx {
  0% {
    transform: translate(-100%);
  }

  100% {
    transform: translate(0);
  }
}</style>